<!-- 用户管理-新增/编辑/查看用户的具体信息 -->
<template>
  <div class="layout-warpper user-info-page">
    <div v-loading="pageLoading" class="layout-body">
      <div class="user-info-body">
        <el-form
          ref="certificateForm"
          grid
          :model="certificateForm"
          label-width="135px"
          class="ui-ml10 ui-mr10"
          :rules="certificateRules"
        >
          <el-collapse v-model="activeNames" icon-text card>
            <el-collapse-item title="申请信息" name="1">
              <el-form-item :span="12" label="项目/标段名称" prop="selectname">
                <el-input v-model="certificateForm.selectname" placeholder="请选择" maxlength="100" autocomplete="off" disabled/>
              </el-form-item>
              <el-form-item :span="12" label="" prop="">
                <el-button type="primary" @click="selectxm()">选择</el-button>
              </el-form-item>
              <el-form-item :span="12" label="申请人单位" prop="sqrdw">
                <el-input v-model="certificateForm.sqrdw" placeholder="请输入申请人单位" maxlength="100" autocomplete="off" />
              </el-form-item>
              <el-form-item :span="12" label="申请人" prop="sqr">
                <el-input v-model="certificateForm.sqr" placeholder="请输入申请人" maxlength="100" autocomplete="off" />
              </el-form-item>
              <el-form-item :span="12" label="身份证号" prop="idcard">
                <el-input v-model="certificateForm.idcard" placeholder="请输入身份证号" />
              </el-form-item>
              <el-form-item :span="12" label="手机号码" prop="mobile">
                <el-input v-model="certificateForm.mobile" placeholder="请输入手机号码" />
              </el-form-item>
              <el-form-item :span="12" label="申请事由" prop="sqsy">
                <el-input v-model="certificateForm.sqsy" placeholder="请输入申请事由" />
              </el-form-item>
<!--              <el-form-item :span="12" label="监管部门" prop="jdbm">-->
<!--                <el-input v-model="certificateForm.jdbm" placeholder="请输入监管部门" />-->
<!--              </el-form-item>-->
            </el-collapse-item>
            <el-collapse-item title="申请数据" name="2">
              <el-form-item label="" prop="czsjs">
                <el-checkbox-group v-model="certificateForm.czsjs">
                  <el-checkbox label="YWHJ" key="YWHJ" name="czsjs">业务环节数据</el-checkbox>
                  <el-checkbox label="YSP" key="YSP" name="czsjs">音视频数据</el-checkbox>
                  <el-checkbox label="STCZRZ" key="STCZRZ" name="czsjs">系统操作日志数据</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-collapse-item>
<!--            <el-collapse-item title="附件" name="3">-->

<!--            </el-collapse-item>-->
          </el-collapse>
        </el-form>
      </div>
    </div>
    <div class="layout-footer user-info-footer">
      <el-button type="primary" :loading="saveLoading" @click="submitData('certificateForm')">保存</el-button>
    </div>
    <el-dialog
      width="60%"
      :close-on-click-modal="false"
      draggable
      :show-close="false"
      title="出证项目列表"
      :visible.sync="editTempl"
    >
      <div>
        <div class="layout-header layout-search">
          <el-form :inline="true" :model="searchForm">
            <el-form-item>
              <el-input
                v-model.trim="searchForm.keyword"
                class="ui-w210"
                placeholder="项目名称/编号"
                @keyup.native.enter="handleSearch()"
              >
                <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearch()" />
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" @row-click="singleElection" highlight-current-row stripe>
          <el-table-column align="center" width="55" label="选择">
            <template slot-scope="scope">
              <!-- 可以手动的修改label的值，从而控制选择哪一项 -->
              <el-radio class="radio" v-model="templateSelection" :label="scope.row.guid">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column type="index" align="left" label="序号" width="50">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="xmname" label="标段名称" min-width="200" />
          <el-table-column prop="name" label="项目名称" min-width="200" />
          <el-table-column prop="code" label="项目编号" min-width="200" />
        </el-table>
      </div>
      <div class="layout-footer">
        <wpagination
          v-if="pageObj.total > pageObj.pageSizes[0]"
          :total="pageObj.total"
          :page.sync="pageObj.currentPage"
          :limit.sync="pageObj.pageSize"
          :pageSizes="pageObj.pageSizes"
          @pagination="bdListFn()"
        />
      </div>
      <br>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="childType != 'view'" :loading="btnLoading" type="primary" @click="selectbdid()">确定</el-button>
        <el-button @click="cancel()">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import { userAdd, userUpdate, userDetail } from "../../../../../api/api";
import { saveCertificate, findCertificateBdPage} from "../../../../../api/weeon/certificate/certificate";
export default {
  // 引入组件
  components: {},
  data() {
    // 身份证号的验证
    const checkIDCard = (rule, value, callback) => {
      if (this.$cafeUtils.isIDCard(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的身份证号"));
      }
    };
    // 联系电话的验证
    const checkTelphone = (rule, value, callback) => {
      if (!value || this.$cafeUtils.isPhone(value) || this.$cafeUtils.isTel(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的联系电话"));
      }
    };
    return {
      tableLoading: false,
      searchForm: {
        keyword: ""
      },
      btnLoading: false,
      childType: "",
      editTempl: false,
      tableData: [],
      pageObj: {
        total: 0,
        currentPage: 0,
        pageSize: 10,
        pageSizes: [10, 20, 30]
      },
      //   当前选择的行的id
      templateSelection: "",
      selectguid: "",
      selectname: "",
      tableLoading: false,
      certificateForm: {
        bdguid: "",
        selectname: "",
        sqrdw: "",
        sqr: "",
        idcard: "",
        mobile: "", // 用户状态默认开启
        sqsy: "",
        jdbm: "",
        czsjs: [],
        czsj: ""
      },
      certificateRules: {
        selectname: [{ required: true, message: "请选择标段", trigger: "blur" }],
        sqrdw: [{ required: true, message: "请输入申请人单位", trigger: "blur" }],
        sqr: [{ required: true, message: "请输入申请人", trigger: "blur" }],
        idcard: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
          { validator: checkIDCard, trigger: "blur" }
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: checkTelphone, trigger: "blur" }
        ],
        sqsy: [{ required: true, message: "请输入申请事由", trigger: "blur" }],
        czsjs: [{ type: 'array', required: true, message: '请至少选择一个选项', trigger: 'change' }]
      },

      submitLoading: false, //
      activeNames: ["1", "2", "3"], // 折叠面板默认全部展开
      saveLoading: false,
      pageLoading: false,
      haveSaved: false // 是否已经保存
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.bdListFn();
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 生命周期 - 销毁之前
  beforeDestroy() {},
  // 生命周期 - 销毁完成
  destroyed() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    submitData(formName) {
      let this_ = this;
      try {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.doAdd();
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } catch (error) {
        console.error(error);
        this.$message({
          type: "warning",
          message: "保存数据失败，稍后再试"
        });
      }
    },
    async doAdd() {
      this.certificateForm.czsj = this.certificateForm.czsjs.toString();
      const res = await saveCertificate(this.certificateForm);
      if (res.stat === 1) {
        this.$message({
          type: "success",
          message: "保存成功",
          single: true
        });
        this.$router.push({ path: "/certificateList"});
      } else {
        this.$message({
          type: "warning",
          message: res.msg,
          single: true
        });
      }
    },
    selectbdid(){
      if(this.certificateForm.bdguid) {
        this.editTempl = false;
        this.childType = "";
      }else{
        this.$message({
          type: "warning",
          message: "请选择标段"
        });
      }
    },
    selectxm() {
      this.editTempl = true;
      this.childType = "edit";
    },
    //取消
    cancel() {
      this.editTempl = false;
      this.childType = "";
    },
    handleSearch() {
      this.pageObj.total = 0;
      this.pageObj.currentPage = 0;
      this.bdListFn();
    },
    // 数据列表
    async bdListFn() {
      try {
        this.tableLoading = true;
        this.tableData = [];
        let params = {
          keyword: this.searchForm.keyword
        };
        const res = await findCertificateBdPage(params);
        console.log(res,"@@@@@@@@@@@@@@@@@");
        this.tableLoading = false;
        if (res.stat === 1) {
          if (res.data.totalElements === 0 && this.pageObj.currentPage !== 0) {
            this.pageObj.currentPage = 0;
            this.$nextTick(() => {
              this.bdListFn();
            });
            return;
          }
          this.tableData = res.data.content;
          this.pageObj.total = res.data.totalElements;
        } else {
          this.$message({
            type: "error",
            message: res.msg || "获取数据失败，请稍后再试",
            single: true
          });
        }
      } catch (error) {
        console.log(error);
        this.tableLoading = false;
      }
    },
    singleElection(row) {
      this.templateSelection = row.guid;
      this.checkList = this.tableData.filter((item) => item.guid === row.guid);
      console.log(`该行的编号为${row.guid}`);
      this.certificateForm.bdguid = row.guid;
      this.certificateForm.selectname = row.xmname + "/" + row.name;
    },
  }
};
</script>
<style lang="scss" scoped>
.user-info-body {
  width: 100%;
  flex-direction: column;
  overflow: auto;
}
.user-info-footer {
  padding: 10px;
  text-align: right;
  border-top: 1px solid #d2d2d2;
}
</style>
<style lang="scss">
.user-info-page {
  .el-collapse.is-card .el-collapse-item {
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    border-radius: 2px;
  }
}
.select-border-circle .el-cascader-panel > :first-child {
  .el-checkbox__inner {
    border-radius: 50%;
  }
}
// 修改嵌套表格样式
.el-table--card > .el-table__header-wrapper th:first-child {
  border-left: none !important;
}
.el-table--card.el-table td.el-table__expanded-cell {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
}
.el-table--card {
  .el-scrollbar__bar {
    position: unset !important;
  }
  .el-table__header {
    border-right: none;
    th {
      border-top: none !important;
      font-weight: bold;
    }
  }
  .table-in-table {
    top: -10px;
    table {
      border-spacing: 0px !important;
      // border-top: 1px solid red;
      border-top: none;
      tr {
        border-spacing: 0px !important;
        td,
        th {
          background: #e5e5e5 !important;
          border-spacing: 0px !important;
          // border-left: 1px solid #fff !important;
        }
        td {
          background: #fff !important;
          margin-bottom: 10px !important;
          border-top: none !important;
          border-color: #d2d2d2 !important;
        }
        td:first-child {
          border-left: 1px solid #d2d2d2 !important;
        }
      }
      .hover_row {
        border: none;
      }
    }
  }
}
.el-table--card .el-table__body-wrapper .el-table__row td:first-child .cell::before,
.el-table--card .el-table__fixed-body-wrapper .el-table__row td:first-child .cell::before {
  display: none;
}
</style>
